<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>canvas</title>
</head>
<body>
	<canvas id="myCanvas" width="400" height="200">
		你的浏览器不支持canvas!
	</canvas>

	<script>
		let WINDOW_WIDTH = 1024;//画布宽度
		let WINDOW_HEIGHT = 768;//画布高度
		window.onload = function () {
            var canvas = document.getElementById('myCanvas');
            canvas.width = 1024;
            canvas.height = 770;

            if (canvas.getContext) {
			  	var ctx = canvas.getContext('2d');

			  	ctx.beginPath(); // 开始路径绘制
				ctx.moveTo(10, 10); // 设置路径起点，坐标为(20,20)
				ctx.lineTo(200, 10); // 绘制一条到(200,20)的直线
				ctx.lineWidth = 1.0; // 设置线宽
				ctx.strokeStyle = '#CC0000'; // 设置线的颜色
				ctx.stroke(); // 进行线的着色，这时整条线才变得可见

				ctx.beginPath();
				ctx.moveTo(40,20);
				ctx.lineTo(60,20);
				ctx.lineTo(60,40);
				ctx.lineTo(40,40);
				// ctx.lineTo(40,20);
				ctx.closePath();
				ctx.lineWidth = 2.0;
				ctx.strokeStyle = '#333';
				ctx.stroke();

				ctx.beginPath();
				ctx.fillStyle = 'yellow';
				ctx.fillRect(50, 50, 200, 100);
				ctx.closePath();

				ctx.beginPath();
				//小疑点？
				ctx.strokeRect(60,200,200,100);
				ctx.closePath();
				ctx.lineWidth = 1.0;
				ctx.strokeStyle = '#CC0000'; // 设置线的颜色
				ctx.stroke();

				ctx.beginPath();
				ctx.clearRect(100,50,50,50);
				ctx.closePath();

				ctx.beginPath();
				ctx.font = "Bold 20px Arial";// 设置字体
				ctx.textAlign = "left";// 设置对齐方式
				ctx.fillStyle = "#333";// 设置填充颜色
				ctx.fillText("Hello!", 320, 50);// 设置字体内容，以及在画布上的位置
				ctx.textAlign = "center";// 设置对齐方式
				ctx.strokeStyle = "#000";// 设置颜色
				ctx.strokeText("Hello!",320, 80);// 绘制空心字
				ctx.textAlign = "right";// 设置对齐方式
				ctx.strokeStyle = "green";// 设置颜色
				ctx.strokeText("Hello!",320, 110);// 绘制空心字
				ctx.closePath();

				ctx.beginPath();
				// 在位置 600 创建蓝线
				ctx.strokeStyle="blue";
				ctx.moveTo(600,20);
				ctx.lineTo(600,170);
				ctx.stroke();

				ctx.font="15px Arial";

				// 显示不同的 textAlign 值
				ctx.textAlign="start";
				ctx.fillText("textAlign=start",600,60);
				ctx.textAlign="end";
				ctx.fillText("textAlign=end",600,80);
				ctx.textAlign="left";
				ctx.fillText("textAlign=left",600,100);
				ctx.textAlign="center";
				ctx.fillText("textAlign=center",600,120);
				ctx.textAlign="right";
				ctx.fillText("textAlign=right",600,140);
				ctx.closePath();


				//绘制实心圆
				ctx.beginPath();
				ctx.arc(780, 60, 50, 0, Math.PI*2, true);
				ctx.fillStyle = "#000000";
				ctx.fill();

				//绘制空心圆形
				ctx.beginPath();
				ctx.arc(780, 170, 50, 0, Math.PI*2, true);
				ctx.lineWidth = 1.0;
				ctx.strokeStyle = "#000";
				ctx.stroke();

				ctx.beginPath();
				var my_gradient=ctx.createLinearGradient(500,0,700,0);
				my_gradient.addColorStop(0,"black");
				my_gradient.addColorStop(0.5,"red");
				my_gradient.addColorStop(1,"white");
				ctx.fillStyle=my_gradient;
				ctx.strokeStyle = my_gradient;
				ctx.fillRect(500,300,200,100);
				ctx.moveTo(500,430);
				ctx.lineTo(700,430);
				ctx.stroke();
				ctx.textAlign="left";
				ctx.fillText("Hello!Hello!Hello!Hello!Hello!Hello!Hello!Hello!", 500, 470);
				ctx.closePath();

				// ctx.beginPath();
				// var radialGrad = ctx.createRadialGradient(400,400,0,400,400,100);
				// radialGrad.addColorStop(0.0,'white');
				// radialGrad.addColorStop(0.25,'yellow');
				// radialGrad.addColorStop(0.5,'green');
				// radialGrad.addColorStop(0.75,'blue');
				// radialGrad.addColorStop(1.0,'black');

				// ctx.fillStyle = radialGrad;
				// ctx.fillRect(0,0,800,800);
				// ctx.closePath();
				ctx.save();
				ctx.beginPath();
				ctx.shadowOffsetX = 10; // 设置水平位移
				ctx.shadowOffsetY = 10; // 设置垂直位移
				ctx.shadowBlur = 5; // 设置模糊度
				ctx.shadowColor = "rgba(0,0,0,0.5)"; // 设置阴影颜色

				ctx.fillStyle = "#CC0000";
				ctx.fillRect(200,330,200,100);
				ctx.closePath();


				// var img = new Image();
				// img.src = 'image.jpg';
				// ctx.drawImage(img, 0, 0); // 设置对应的图像对象，以及它在画布上的位置

				ctx.save();
				ctx.shadowOffsetX = 10;
				ctx.shadowOffsetY = 10;
				ctx.shadowBlur = 5;
				ctx.shadowColor = 'rgba(0,0,0,0.5)';

				ctx.fillStyle = '#CC0000';
				ctx.fillRect(10,10,150,100);

				ctx.restore();
				ctx.restore();

				ctx.fillStyle = '#000000';
				ctx.fillRect(180,10,150,100);
			} else {
                alert('当前浏览器不支持canvas，请更换浏览器再试');
            }
        }

 //  	var image = new Image();
	// image.onload = function() {
	//   var canvas = document.createElement('canvas');
	//   canvas.width = image.width;
	//   canvas.height = image.height;
	//   canvas.getContext('2d').drawImage(image, 0, 0);
	//   // 插入页面底部
	//   document.body.appendChild(image);
	//   return canvas;
	// }

	// image.src = 'image.jpg';
	</script>
</body>
</html>